<template>
  <view class="classify">
    <view class="header">
      <uni-easyinput prefixIcon="search" v-model="keyWord" placeholder="关键词查找" @input="searchType">
      </uni-easyinput>
    </view>
    <scroll-view class="types" scroll-y @scroll="imgsScroll" :scroll-top="top" scroll-with-animation>
      <view class="item" v-for="(item, index) in typeList" :key="index">
        <view class="label">{{ item.label }}</view>
        <view class="every">
          <view class="everyItem" v-for="(item1, index1) in item.children" @tap="change(item1)" :index="index1"
            :key="index1">
            <text class="text">{{ item1.label }}</text>
            <image class="img" :src="`https://img.moehu.org/pic.php?id=${item1.value}&size=small`" mode="aspectFill">
            </image>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="tabbar" ref="ani" :style="{ Transform: `translateY(${move}px)`, opacity: `${move == 0 ? 1 : 0}` }">
      <view class="item">
        <view class="bo" @tap="goHome" hover-class="hover-view" custom-class="transition" hover-stay-time="200">
          <image class="logoImg" :src="homeImg" mode="" />
          <text>首页</text>
        </view>
        <view class="bo" @tap="goClassify" hover-class="hover-view" custom-class="transition" hover-stay-time="200">
          <image class="logoImg" :src="classImg" mode="" />
          <text>分类</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { nextTick, ref, onMounted, onBeforeUnmount } from 'vue'
import classImg from '@/static/images/class.png'
import homeImg from '@/static/images/home.png'
import { onLoad } from '@dcloudio/uni-app'
import { types } from './searchType'
import type { item } from './searchType'
import _ from 'lodash'
const top: any = ref(0)
const oldTop: any = ref(0)

const move: any = ref(0)
const show: any = ref(true)
const ani: any = ref(null)
const keyWord = ref('')
const typeList = ref<item[]>([])
let timer: any = null

const goHome = () => {
  uni.switchTab({
    url: '/pages/home/home'
  })
}

const goClassify = () => {
  uni.switchTab({
    url: '/pages/class/class'
  })
}

const imgsScroll = _.throttle((e: any) => {
  oldTop.value = e.detail.scrollTop
  move.value = 60
  clearTimeout(timer)
  timer = setTimeout(() => {
    move.value = 0
  }, 500)
  if (e.detail.scrollTop > 200) {
    show.value = false
  } else {
    show.value = true
  }
}, 200)


const change = (e: any) => {
  uni.navigateTo({
    url: `/pages/classify/classify?id=${e.value}&title=${e.label}`
  })
}
const searchType = () => {
  nextTick(() => {
    const resList = _.cloneDeep(types)
    typeList.value = result(keyWord.value, resList)
  })
}
const result = (keyword: string, resList: any[]) => {
  return resList.filter((item: any) => {
    if (item.label.includes(keyword)) {
      return item
    } else if (item.children) {
      item.children = result(keyword, item.children)
      if (item.children.length > 0) return item
    }
  })
}

onLoad(() => {
  uni.hideTabBar()
})
onMounted(() => {
  typeList.value = types
})
onBeforeUnmount(() => {

})
</script>

<style scoped lang="scss">
.classify {
  width: 100%;
  padding: 10rpx;
  padding-top: var(--status-bar-height);
  height: calc(100vh - var(--window-top) - var(--window-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .header {
    padding: 10rpx 20rpx;
  }

  .types {
    width: 100%;
    flex: 1;
    box-sizing: border-box;

    .item {
      width: 100%;
      box-sizing: border-box;
      margin: 5px 0;

      .label {
        margin: 20rpx 0;
        padding: 0px 10rpx;
        font-weight: bold;
        border-left: 3px solid #0055ff;
        font-size: 18px;
        color: white;
        text-shadow: 0 0 2px blue;
      }

      .every {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10rpx;
        padding: 10rpx;
        position: relative;
        align-items: center;
        justify-content: center;


        .everyItem {
          overflow: hidden;
          min-height: 50px;
          background-size: 100% 100%;
          position: relative;
          text-align: center;
          font-size: 15px;
          font-weight: bold;
          color: white;
          background-color: #8080803d;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-radius: 10rpx;
          text-shadow: 0 0 2px rgb(0, 60, 255);


          .text {
            z-index: 10;
            position: relative;
          }

          .img {
            top: 0;
            left: 0;
            position: absolute;
            width: 100%;
            height: 50px;
          }
        }
      }
    }
  }

  .tabbar {
    height: 100rpx;
    width: 100%;
    z-index: 100;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    transition: all 0.4s ease-in-out;

    .item {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%;
      height: 100rpx;



      .bo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        color: black;
        font-weight: bold;
        background-color: rgba(255, 255, 255, 0.603);
        gap: 5px;

        .logoImg {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }

  }
}
</style>